<template>
    <div>
        <div style="width: 100%;height: 100px;">
            <div style="margin-top: 30px;margin-left: 30px;float: left;">
                砍价状态：
                <!-- 下拉框 -->
                <el-select v-model="value" placeholder="请选择">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
            </div>
            =
            <!-- 搜索 -->
            <div style="margin-top: 30px;margin-left: 30px;float: left;width: 600px;">
                <div style="float: left;margin-top: 10px;">
                    日期选择：
                </div>
                <div class="block">
                    <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
                    </el-date-picker>
                </div>
            </div>
        </div>


        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="ID" prop="date">
            </el-table-column>
            <el-table-column label="砍价图片" prop="name">
            </el-table-column>
            <el-table-column label="砍价商品名称" prop="date">
            </el-table-column>
            <el-table-column label="商品介绍" prop="name">
            </el-table-column>
            <el-table-column label="砍价价格" prop="date">
            </el-table-column>
            <el-table-column label="总共砍次数" prop="name">
            </el-table-column>
            <el-table-column label="剩余砍价次数" prop="date">
            </el-table-column>
            <el-table-column label="开始时间" prop="date">
            </el-table-column>
            <el-table-column label="结束时间" prop="date">
            </el-table-column>
            <el-table-column label="拼团状态">
                <template slot-scope="{row}">
                    <el-switch v-model="row.shelf_state" class="switch" :active-value="1" :inactive-value="0"
                        @change="handleStatusChange($event, row)" />
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">查看详情</el-button>
                </template>
            </el-table-column>
        </el-table>


        <div class="block" style="margin-right: 50px;float:right;margin-top: 20px;">
            <!-- <span class="demonstration">完整功能</span> -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="currentPage4" :page-sizes="[100, 200, 300, 400]" :page-size="100"
                layout="total, sizes, prev, pager, next, jumper" :total="400">
            </el-pagination>
        </div>


    </div>
</template>

<script>
export default {
    data() {
        return {
            options: [{
                value: '选项1',
                label: '黄金糕'
            }, {
                value: '选项2',
                label: '双皮奶'
            }, {
                value: '选项3',
                label: '蚵仔煎'
            }, {
                value: '选项4',
                label: '龙须面'
            }, {
                value: '选项5',
                label: '北京烤鸭'
            }],
            tableData: [{
                date: '2016-05-02',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1518 弄'
            }, {
                date: '2016-05-04',
                name: '王小虎',
                address: '上海市普陀区金沙江路 1517 弄'
            }],
            value: '',
            //下拉框
            input: null,
            currentPage4: null,
        }
    },

    created() {

    },
    methods: {
        //状态
        handleStatusChange() { },
        //删除
        handleEdit() { },
        //分页
        handleSizeChange() { },
        handleCurrentChange() { },
        //下拉框
        getUserList() { }
    }


}
</script>
